<template>
    <el-row>
        <el-col :span="12" class="white-block">
            <h3>普通上传（初始无值）</h3>
            <upload class="mt20" :fileList.sync="fileList1" :multiple="true"></upload>
            <h3 class="mt20">普通上传（初始有值）</h3>
            <upload class="mt20" :fileList.sync="fileList" :multiple="true"></upload>
            <h3 class="mt20">普通上传（只能上传png文件）</h3>
            <upload class="mt20" :fileList.sync="fileList2" :multiple="true" :accept="'.png'"></upload>
            <h3 class="mt20">普通上传（小尺寸）</h3>
            <upload class="mt20" :fileList.sync="fileList3" :multiple="true" :size="'small'"></upload>
            <h3 class="mt20">上传显示图片列表缩略图</h3>
            <upload :listType="'picture'" :fileList.sync="fileList4" class="mt20"></upload>
            <h3 class="mt20">拖拽上传</h3>
            <upload :drag="true" :fileList.sync="fileList5" class="mt20"></upload>
        </el-col>
        <el-col :span="11" :offset="1">
            <table-example :data="tableData" :tableColumn="header" class="mt20"></table-example>
        </el-col>
    </el-row>
</template>

<script>
    import upload from '../../components/upload'
    import tableExample from '../../components/table'

    export default {
        name: '',
        data() {
            return {
                fileList: [{
                    name: 'food.jpeg',
                    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                }, {
                    name: 'food2.jpeg',
                    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                }],
                fileList1: [],
                fileList2: [],
                fileList3: [],
                fileList4: [],
                fileList5: [],
                header: [
                    {
                        prop: 'name',
                        label: '参数名'
                    },
                    {
                        prop: 'usage',
                        label: '参数用法'
                    },
                    {
                        prop: 'info',
                        label: '参数说明'
                    },
                    {
                        prop: 'choice',
                        label: '可选值'
                    },
                    {
                        prop: 'default',
                        label: '默认值'
                    }
                ],
                tableData: []
            }
        },
        mounted() {
            let tableData = [
                {
                    name: 'multiple',
                    usage: ':multiple',
                    info: '是否支持多选文件',
                    choice: 'true/false',
                    default: 'false'
                },
                {
                    name: 'limit',
                    usage: ':limit',
                    info: '最大允许上传个数',
                    choice: '-',
                    default: '3'
                },
                {
                    name: 'fileList',
                    usage: ':file-list',
                    info: '上传的文件列表',
                    choice: '-',
                    default: '[]'
                },
                {
                    name: 'accept',
                    usage: ':accept',
                    info: '接受上传的文件类型（string）',
                    choice: '.jpg.png等等',
                    default: '-'
                },
                {
                    name: 'listType',
                    usage: ':list-type',
                    info: '文件列表的类型',
                    choice: 'text/picture/picture-card',
                    default: 'text'
                },
                {
                    name: 'drag',
                    usage: ':drag',
                    info: '是否启用拖拽上传',
                    choice: 'true/false',
                    default: 'false'
                },
                {
                    name: 'size',
                    usage: ':size',
                    info: '按钮及提示尺寸（string）',
                    choice: 'large/small/mini',
                    default: '-'
                },
                {
                    name: 'action',
                    usage: ':action',
                    info: '上传的地址',
                    choice: '-',
                    default: '/file/uploadOne'
                },
                {
                    name: 'change',
                    usage: '@change',
                    info: '文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用',
                    choice: '-',
                    default: '-'
                }
            ]
            this.tableData = tableData
        },
        methods: {},
        components: {
            upload,
            tableExample
        }
    }
</script>

<style scoped lang="less">

</style>
